<template>
  <div class="detail-has-tab">
    <div class="tab-content">
      <div
        class="tab-item"
        :class="activePage === 'basicInfo' ? 'active' : ''"
        @click="changeTab('basicInfo')"
      >
        基本信息
      </div>
      <div
        class="tab-item"
        :class="activePage === 'rhbf' ? 'active' : ''"
        @click="changeTab('rhbf')"
      >
        入户拜访
      </div>
      <div
        class="tab-item"
        :class="activePage === 'jjjy' ? 'active' : ''"
        @click="changeTab('jjjy')"
      >
        紧急救援
      </div>
      <div
        class="tab-item"
        :class="activePage === 'jjxq' ? 'active' : ''"
        @click="changeTab('jjxq')"
      >
        需求管理
      </div>
      <div
        v-if="zxxx?.cancellationReasonCode != 0"
        class="tab-item"
        :class="activePage === 'zxxx' ? 'active' : ''"
        @click="changeTab('zxxx')"
      >
        注销信息
      </div>
      <div
        v-if="showTFGATab && zxxx.visitNum != 0"
        class="tab-item"
        :class="activePage === 'tfga' ? 'active' : ''"
        @click="changeTab('tfga')"
      >
        探访关爱
      </div>
    </div>
    <component
      @getZXXX="getZXXX"
      :is="CurrentCompoent[activePage]"
      style="flex: 1"
      :id="props.id"
      :zxxx="zxxx"
    ></component>
    <!-- <div class="bottom-btns">
      <el-button class="btn-form-close" type="primary" @click="emit('close')">
        关闭
      </el-button>
    </div> -->
  </div>
</template>

<script>
import { intersection } from 'lodash-es'
import { computedAsync } from '@vueuse/core'
import { get_zzda_detail } from '@/api/basicSetting.js'
export default {
  name: ''
}
</script>

<script setup>
import {
  ref,
  reactive,
  onBeforeMount,
  markRaw,
  defineAsyncComponent,
  defineEmits,
  defineProps
} from 'vue'
const props = defineProps({
  id: {
    type: String,
    default: ''
  },
  fromPage: {
    type: String,
    default: ''
  }
})
const showTFGATab = computedAsync(
  async () => {
    const { data } = await get_zzda_detail(props.id)
    if (data.saveType != 1) {
      return false
    }
    if (data.elderType) {
      let arr = data.elderType.split(',')
      let result = intersection(arr, ['01', '02', '03', '04', '05', '06', '07'])
      return result.length > 0
    }
    return false
  },
  false // initial state
)
const zxxx = ref({})
const activePage = ref(null)
const CurrentCompoent = reactive({
  basicInfo: markRaw(defineAsyncComponent(() => import('./basicInfo.vue'))),
  rhbf: markRaw(defineAsyncComponent(() => import('./rhbf.vue'))),
  jjjy: markRaw(defineAsyncComponent(() => import('./jjjy.vue'))),
  jjxq: markRaw(defineAsyncComponent(() => import('./jjxq.vue'))),
  zxxx: markRaw(defineAsyncComponent(() => import('./zxxx.vue'))),
  tfga: markRaw(defineAsyncComponent(() => import('./tfga.vue')))
})
const changeTab = val => {
  activePage.value = val
}
const getZXXX = val => {
  zxxx.value = val
}
const emit = defineEmits(['close'])
onBeforeMount(() => {
  activePage.value = 'basicInfo'
})
</script>

<style lang="scss" scoped>
.detail-has-tab {
  display: grid;
  grid-template-rows: calc(100% - 50px) 50px;
  grid-template-columns: 170px calc(100% - 170px);
  width: 100%;
  height: 100%;
  background-color: #fff;
  .tab-content {
    width: 170px;
    padding: 10px;
    display: flex;
    flex-direction: column;
    .tab-item {
      width: 152px;
      height: 30px;
      line-height: 30px;
      font-size: 14px;
      text-align: center;
      border: 1px solid#DCDFE6;
      cursor: pointer;
      margin-bottom: 10px;
      border-radius: 4px;
      color: #606266;
      // & + .tab-item {
      //   border-top: none;
      // }
      &:hover {
        color: #409eff;
        background-color: #ecf5ff;
        border-color: #c6e2ff;
        outline: 0;
      }
      &.active {
        color: #fff;
        background: #2982e6;
        border-color: #2982e6;
      }
    }
  }
  .btns {
    position: fixed;
    top: 120px;
    right: 25px;
    z-index: 100;
  }

  .view-container {
    margin: 0 30px;
    padding-bottom: 30px;
  }
  .info-container {
    margin: 20px auto;
    .content {
      width: 100%;
      margin-right: 20px;
    }
    .pic-content {
      width: 100%;
    }
    .info-title {
      margin-bottom: 10px;
      font-weight: bold;
      font-size: 13px;
      color: #606266;
      position: relative;
      left: 10px;
      &::before {
        content: '';
        position: absolute;
        width: 5px;
        height: 18px;
        background-color: #126cff;
        left: -10px;
        top: -2px;
      }
    }
  }
  .el-form-item {
    margin-bottom: 0px !important;
    // &.is-error {
    // 	top: -6px;
    // 	position: relative;
    // }
  }
  .bottom-btns {
    grid-column: 1 / 3;
    display: flex;
    align-items: center;
    justify-content: center;
    border-top: 1px solid #dcdfe6;
  }
}
</style>
